<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>freshskin</title>
		<link rel="stylesheet" type="text/css" href="字体图标/css/font-awesome.min.css"/>
		<style type="text/css">
			*{padding:0;margin: 0;}
			ul{list-style: none;}
			.wrap{
				width:1000px;
				margin:0px auto;
			}
			header{
				min-width: 1518px;
				background-color: #333333;
			}
			.top{
				line-height: 40px;
				height:40px;
			}
			.top img{
				margin-top:7px;
				float: left;
			}
			.top ul li{
				margin-left: 10px;
				color:#8b8b8b;
				float: left;
			}
			.top ul li:hover{
				color: white;
			}
			.top ul{
				float: right;
			}
			.content1{
				width: 1518px;
				height:710px;
				position: relative;
				overflow: hidden;
			}
			.content1 video{
				width:100%;
				position: relative;
				z-index: 1;
			}
			.content1:hover .btn1{
				left:500px;
			}
			.content1:hover .btn2{
				left: 760px;
			}
			.navHead{
				z-index: 2;
				border-bottom:2px solid white;
				line-height: 100px;
				height: 100px;
				background: rgba(0,0,0,0.3);
				position: absolute;
				width: 100%;
				top: 0px;
			}
			.navHead span.con{
				display: inline-block;
				width: 100%;
				height:100px;
				font-size: 20px;
				float: left;
				color: white;
			}
			.navHead span.con .menu{
				position: relative;
				float: left;
			}
			.navHead span.con .menu img:nth-child(1){
				margin-right: 10px;
				vertical-align: middle;
			}
			.navHead span.con .menu img:nth-child(2){
				margin-left: 10px;
				vertical-align: middle;
			}
			.navHead p:nth-child(2){
				position: relative;
				margin-left:165px;
				display: inline-block;
			}
			.navHead p:nth-child(2) input{
				padding-left:38px;
				height:35px;
				width:235px;
				background:none;
				border: 1px solid white;
				border-radius:50px;
			}
			.navHead p:nth-child(2) img{
				top: 42px;
				left:8px;
				position: absolute;
			}
			.navHead ul.list{
				margin:32px 0px 0px 86px;
				width:362px;
				height:50px;
				float: right;
			}
			.navHead ul.list li{
				margin-left: 46px;
				text-align: center;
				line-height: 40px;
				float: left;
				width: 40px;
				height: 40px;
				border: 1px solid white;
				border-radius: 50%;
			}
			.logo{
				z-index:1;
				position: absolute;
				top:30%;
				left: 30%;
			}
			.navHead ul.list li i{
				font-size:24px;
			}
			.fontTip{
				z-index:1;
				font-size: 14px;
				position: absolute;
				top:70%;
				left: 30%;
			}
			.content2{
				margin-top: 70px;
				height:500px;
			}
			.tipPic{
				padding: 0px 20px 0px 50px;
				box-sizing: border-box;
				margin: 0px auto;
				height: 100px;
				width: 450px;
				border-radius: 50px;
				background-color: #f7f7f7;
			}
			.content2_top img{
				height: 100px;
			}
			.content2_top{
				height: 100px;
			}
			.content3_top .tipPic{
				width:700px;
			}
			.content3{
				height:445px;
				padding: 70px 0px 0px 0px;
				box-sizing: border-box;
				background-color: #83ba8b;
			}
			.content3_top{
				height:175px;
				width:100%;
			}
			.content3_top p,
			.content2_top p{
				margin-top:20px;
				text-align: center;
				color: #dd0067;
			}
			.content3_bottom li{
				width:278px;
				float: left;
			}
			.content2_bottom li{
				border: 1px solid #cccccc;
				width:278px;
				float: left;
			}
			.content3_bottom li:nth-child(2),
			.content2_bottom li:nth-child(2){
				margin:0px 80px;
			}
			.content3_bottom,
			.content2_bottom{
				height:350px;
				margin-top: 80px;
			}
			.content3_bottom li{
				perspective-origin: center 0px;
				perspective: 280px;
			}
			.content2_bottom{
				position: relative;
			}
			.con{
				height: 650px;
			}
			.content3_top p{
				color: white;
			}
			.content4_top{
				height:200px;
			}
			.content4_top .tipPic{
				width: 650px;
				padding: 0px 20px 0px 50px;
				box-sizing: border-box;
			}
			.content4_bottom{
				height:360px;
			}
			.content4_bottom li{
				float: left;
				width:150px;
				height: 150px;
				margin: 0px 0px 20px 130px;
				overflow: hidden;
				border: 1px solid #dcdcdc;
				border-radius: 50%;
				line-height:198px;
			}
			.content4_bottom li:nth-child(5),
			.content4_bottom li:nth-child(1){
				margin-left: 0px;
			}
			.content4_bottom li img{
				width: 100%;
			}
			.con2{
				height:470px;
				background-color: #545861;
			}
			.content5>p:nth-child(1){
				width:1000px;
				border-bottom: 1px solid #8c9299;
				height:100px;
				text-align: center;
			}
			.content5 form span{
				color: #ffe1a3;
			}
			.content5 form{
				width: 1000px;
				padding:20px 20px 0px 20px;
				box-sizing: border-box;
			}
			.content5 form input{
				width: 220px;
				height:35px;
				margin: 10px 0px 20px 0px;
				border: none;
				outline: none;
				border-radius:10px;
			}
			.form_left p{
				float: left;
				width:280px;
				padding:25px 30px 20px 30px;
				box-sizing: border-box;
				height:300px;
				text-align: start;
			}
			.form_right{
				margin-left: 10px;
				padding: 22px 0px 0px 0px;
				box-sizing: border-box;
				width: 380px;
				height: 230px;
				display: inline-block;
			}
			.form_right textarea{
				margin-top:10px;
			}
			form img{
				margin-top:46px;
			}
			footer{
				height: 50px;
				background-color: #333333;
			}
			footer p{
				line-height: 50px;
				color:#999999;
				text-align: center;
			}
			.menu span.menuSpan{
				display: none;
				z-index:2;
				height:615px;
				background: rgba(0,0,0,0.3);
				top: 100px;
				left: 0px;
				padding: 20px 12px 0px 12px;
				box-sizing: border-box;
				width: 380px;
				position: absolute;
			}
			.menu span.menuSpan ul{
				padding: 0px 0px 0px 48px;
				box-sizing: border-box;
				width: 170px;
				height: 166px;
				float: left;
			}
			.menu span.menuSpan ul:nth-child(5){
				height: 140px;
				line-height: 40px;
			}
			.menu span.menuSpan ul li:nth-child(1){
				font-size: 18px;
				height: 35px;
			}
			.menu span.menuSpan ul li{
				font-size:14px;
				height:30px;
			}
			.triangle{
				position: absolute;
				top: 0px;
				left: 48px;
				width: 0px;
				height: 0px;
				border: 10px solid transparent;
				border-top: 13px solid white;
			}
			.list li{
				box-shadow:0px 0px 0px 0px white inset; 
				transition:box-shadow 1s;
			}
			.list li i{
				color: white;
				transition:color 1s;
			}
			.list li:hover{
				box-shadow:0px 0px 0px 24px white inset;
			}
			.list li:hover i{
				color:rgba(0,0,0,0.3);
			}
			.btn{
				height:62px;
				position: absolute;
				bottom:40px;
				width:100%;
			}
			.btn1:hover i,.btn2:hover i{
				box-shadow:0px 0px 0px 24px #8bbba0 inset;
			}
			.btn1,.btn2{
				transition:left 2s; 
				position: absolute;
				z-index: 1;
				bottom:0px;
				font-size:14px;
				line-height: 60px;
				text-align: center;
				color: rgba(0,0,0,0.3);
				width: 230px;
				height: 60px;
				border-radius: 50px;
				background-color: white;
			}
			.btn1{
				left:-230px;
			}
			.btn2{
				left:1518px;
			}
			.btn1 i,.btn2 i{
				transition:box-shadow 2s;
				box-shadow:0px 0px 0px 0px #8bbba0 inset; 
				position: absolute;
				left: 8px;
				top: 6px;
				width:45px;
				height:45px;
				line-height:45px;
				text-align: center;
				font-size:20px;
				border-radius: 50%;
				display: inline-block;
				border:2px solid rgba(0,0,0,0.3);
			}
			.hiden{
				display: none;
				position: absolute;
				top:1px;
				left: 0px;
				width:280px;
				height: 254px;
				background:rgba(0,0,0,0.3);
			}
			.hiden p.tip{
				font-size:20px;
				color: white;
				height:40px;
				margin-top:60px;
			}
			.hiden p.text{
				font-size:12px;
				color: white;
				height: 30px;
				
			}
			.hiden p:nth-child(3){
				height:58px;
			}
			.hiden p{
				text-align: center;
			}
			.content3_bottom li{
				border: 1px solid transparent;
				position: relative;
			}
			.content3_bottom li img{
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.content3_bottom li img:nth-child(1){
				transform:rotateX(0deg);
				z-index:1;
				transition:transform 2s linear;
			}
			.content3_bottom li img:nth-child(2){
				transform:rotateX(180deg);
				transition:transform 2s linear;
			} 
			.content3_bottom li:hover img:nth-child(2){
				transform:rotateX(360deg);
				transition:transform 2s linear;
			}
			.content3_bottom li:hover img:nth-child(1){
				transform:rotateX(180deg);
			}
			.content4_bottom li{
				position: relative;
			}
			.content4_bottom li img:nth-child(1){
				top:48px;
			}
			.content4_bottom li img{
				position: absolute;
			}
			.content4_bottom li img:nth-child(1){
				transition: all 1s ease-in 0s; 
			}
			.content4_bottom li img:nth-child(2){
				opacity:0;
				width:150px;
				height: 150px; 
				transition: all 1s ease-in 0.2s;
			}
			.content4_bottom li:hover img:nth-child(1){
				transform: scale(0.8,0.8);
				opacity:0;
			}
			.content4_bottom li:hover img:nth-child(2){
				transform: scale(0.8,0.8);
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<!-- 头部导航 -->
		<header>
			<div class="wrap top">
				<img src="images/logo.png" >
				<ul>
					<li>登录</li>
					<li>注册</li>
				</ul>
			</div>
		</header>
		<!-- 主要内容 -->
		<section class="content">
			<!-- 视频模块 -->
			<article class="content1 wrap">
				<!-- 导航栏 -->
				<nav class="navHead">
					<div class="wrap">
						<span class="con">
							<div class="menu">
								<p class="choose">
									<img src="images/sanxian.png">
									选项
									<img src="images/sanjiao.png" >
								</p>
								<span class="menuSpan">
									<ul>
										<li>护肤</li>
										<li>>洁面</li>
										<li>>爽肤水</li>
										<li>>精华</li>
										<li>>乳液</li>
									</ul>
									<ul>
										<li>男士专区</li>
										<li>>爽肤水</li>
										<li>>洁面</li>
										<li>>面霜</li>
										<li>>精华</li>
									</ul>
									<ul>
										<li>彩妆</li>
										<li>>BB霜</li>
										<li>>卸妆</li>
										<li>>粉底液</li>
									</ul>
									<ul>
										<li>热门搜索</li>
										<li>>洗面奶</li>
										<li>>去黑头</li>
										<li>>隔离</li>
										<li>>面膜</li>
									</ul>
									<ul>
										<li>香氛</li>
										<li>>女士香水</li>
										<li>>男士香水</li>
										<li>>中性香水</li>
									</ul>
									<p class="triangle"></p>
									<img src="images/tu1.jpg" >
								</span>
							</div>
							<p>
								<img src="images/search.png" >
								<input type="text"  placeholder="请输入商品名称,品牌或编号"/>
							</p>
							<ul class="list">
								<li class="music">
									<i class="fa fa-music"></i>
								</li>
								<li class="volume">
									<i class="fa fa-volume-up"></i>
								</li>
								<li>
									<i class="fa fa-facebook-square"></i>
								</li>
								<li>
									<i class="fa fa-twitter-square"></i>
								</li>
							</ul>
						</span>
					</div>
				</nav>
				<audio src="audio/home.ogg" id="music" hidden="hidden">
					<source src="audio/home.ogg">
				</audio>
				
				<video  loop muted autoplay id="video1">
					<source src="video/home_loop_720p.mp4">
				</video>
				<img src="images/wenzi.png"  class="logo">
				<p class="fontTip">Select the right resolution for your PC and dive in! （请为您的电脑选择正确的分辨率）</p>
				<div class="btn">
					<div class="btn1"><i>></i>STANDARD标准</div>
					<div class="btn2"><i>></i>HD高清</div>
				</div>
			</article>
			<!-- 最新单品模块 -->
			<article class="content2">
				<div class="wrap">
					<div class="content2_top">
						<div class="tipPic">
							<img src="images/new.jpg">
						</div>
						<p>补水保湿 提亮肤色 低敏配方 收缩毛孔 滋养容颜</p>
					</div>
					<ul class="content2_bottom">
						<li>
							<img src="images/pic1.jpg" >
						</li>
						<li>
							<img src="images/pic2.jpg" >
						</li>
						<li>
							<img src="images/pic3.jpg" >
						</li>
						<span class="hiden">
							<p class="tip"></p>
							<p class="text"></p>
							<p><img src="images/jiantou.png" ></p>
							<p><img src="images/anniu.png" ></p>
						</span>
					</ul>
				</div>
			</article>
			<!-- 我要试装模块 -->
			<article class="con">
				<div class="content3">
					<div class="content3_top wrap">
						<div class="tipPic">
							<img src="images/shizhuang.jpg" >
						</div>
						<p>美化容貌 增添自信 突出个性</p>
					</div>
					<ul class="content3_bottom wrap">
						<li>
							<img src="images/try1.jpg" >
							<img src="images/try4.jpg" >
						</li>
						<li>
							<img src="images/try2.jpg" >
							<img src="images/try5.jpg" >
						</li>
						<li>
							<img src="images/try3.jpg" >
							<img src="images/try6.jpg" >
						</li>
					</ul>
				</div>
			</article>
			<!-- 品测中心模块 -->
			<article class="content4">
				<div class="wrap">
					<div class="content4_top content2_top">
						<div class="tipPic">
							<img src="images/cp.jpg" >
						</div>
						<p>评测 我们更专业 用户更放心</p>
					</div>
					<ul class="content4_bottom">
						<li>
							<img src="images/cp1.jpg" >
							<img src="images/th1.png" >
						</li>
						<li>
							<img src="images/cp2.jpg" >
							<img src="images/th2.png" >
						</li>
						<li>
							<img src="images/cp3.jpg" >
							<img src="images/th3.png" >
						</li>
						<li>
							<img src="images/cp4.jpg" >
							<img src="images/th4.png" >
						</li>
						<li>
							<img src="images/cp5.jpg" >
							<img src="images/th5.png" >
						</li>
						<li>
							<img src="images/cp6.jpg" >
							<img src="images/th6.png" >
						</li>
						<li>
							<img src="images/cp7.jpg" >
							<img src="images/th7.png" >
						</li>
						<li>
							<img src="images/cp8.jpg" >
							<img src="images/th8.png" >
						</li>
					</ul>
				</div>
			</article>
			<!-- 表单模块 -->
			<article class="con2">
				<div class="wrap content5">
					<p>
						<img src="images/logo1.jpg" >
					</p>
					<form>
						<span class="form_left">
							<p>
								姓名:
								<input type="text"/>
								电话：
								<input type="text"/>
								<img src="images/but.jpg" >
							</p>
							<p>
								邮箱：
								<input type="text"/>
								密码：
								<input type="password"/>
							</p>
						</span>
						<span class="form_right">
							留言：
							<textarea rows="14" cols="52">
								
							</textarea>
						</span>
					</form>
				</div>
			</article>
		</section>
		<!-- 页脚 -->
		<footer>
			<p class="wrap">fresh skin 美肤科技有限公司</p>
		</footer>
		<script src="jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var music=document.getElementsByClassName("music")[0];
			//二级菜单显示与隐藏
			$(".menu").hover(function(){
				$(".menuSpan").toggle();
			})
			
			
			//音乐播放
			var flag=true;
			$(".music").click(function(){
				if (flag) {
					$("#music")[0].play();
					flag=false;
				} else{
					$("#music")[0].pause();
					flag=true;
				}
			})
			
			
			//是否静音
			var count=0;
			$(".volume").click(function(){
				if(count==0){
					$("#music")[0].muted=true;
					count=1;
				}else{
					$("#music")[0].muted=false;
					count=0;
				}
			})
			
			
			//蒙版效果？
			var arr=[
				{tip:"fresh skin 薏仁水",text:"化妆水/爽肤水单品"},
				{tip:"蜂蜜原液天然滋养",text:"美白护肤套装"},
				{tip:"纯情诱惑一抹惊艳",text:"告别暗淡唇"}
			];
			
			$(".content2_bottom li").hover(function(){
				$(".tip").text(arr[$(this).index()].tip);
				$(".text").text(arr[$(this).index()].text);
				$(".hiden").css("left",`${$(this).index()*360}px`).stop().slideToggle("slow");
			})
			
			
			//图片旋转
			$(".content3_bottom li").hover(function(){
				$(this).children().eq(1).stop().animate({"z-index":"1"},1300);
			},function(){
				$(this).children().eq(1).stop().animate({"z-index":"0"},750);
			})
			
			
			//图片缩小
			
		</script>
	</body>
</html>
